<template>
  <div class="container">
    <van-nav-bar title="搜索结果" left-arrow @click-left="goBack" />
    <section>
      <plain-text
        v-for="news in resultList"
        :key="news.art_id"
        :title="news.title"
        :author="news.aut_name"
        :commentCount="news.comm_count"
        :timestamp="news.pubdate"
        :images="news.cover.images"
      />
    </section>
    <div class="no-more" v-if="resultList[0]">没有更多了</div>
    <div class="no-found" v-else>没有找到相关内容</div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("searchRes", ["resultList"]),
  },
  methods: {
    ...mapActions("searchRes", ["updateResultList"]),
    goBack() {
      this.$router.go(-1);
    },
  },
  async created() {
    await this.updateResultList(this.$route.query.searchValue || []);
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  height: 100vh;
  flex-direction: column;

    .section {
      flex: 1;
      overflow-y: auto;
    }
    .no-more,
    .no-found {
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #666;
      border-top: 1px solid #eee;
    }
    .no-found {
      bottom: none;
    }
}
</style>